<template>
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<view >
		<view class="set-box bg-white pb-5">
			<uv-form :model="form" ref="uForm"  :rules="rules" :errorType="errorType" labelWidth="80">
				<uv-form-item label="跟进商机:"  prop="name">
					<uv-input v-model="businessName" border="none" disabled disabledColor="#ffffff" />
				</uv-form-item>
				<uv-form-item label="跟进状态:"  prop="followStatus" @click="followShow" required>
					<uv-input v-model="followName"  placeholder="选择跟进状态" disabled disabledColor="#ffffff" >
						<template v-slot:suffix>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="跟进方式:"  prop="recordType" @click="selectShow" required>
					<uv-input v-model="recordTypeName" disabled disabledColor="#ffffff" placeholder="选择跟进方式">
						<template v-slot:suffix>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item :label-position="labelPosition" label="下次跟进 :" @click="createTimeShow">
					<uv-input  v-model="nextTime" placeholder="选择跟进时间" disabled disabledColor="#ffffff" >
						<template v-slot:suffix>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item required label="跟进内容:" prop="content">
					<uv-textarea v-model="form.content" placeholder="请输入跟进内容"></uv-textarea>
				</uv-form-item>
			</uv-form>
			<view class="mt-5" style="text-align: center;">
				<view class="mb-3">
					<uv-button   @click="submit(false)"  :ripple="true" color="#09b4f1" >立即提交</uv-button>
				</view>
			</view>
		</view>
		<!-- 选择跟进方式 -->
		<uv-action-sheet :actions="selectList" ref="selectShowRef" title="请选择跟进方式" @select="recordTypeClick"></uv-action-sheet>
		<!-- 选择跟进状态 -->
		<uv-action-sheet :actions="followList" ref="followStatusShowRef" title="请选择跟进状态" @select="followClick"></uv-action-sheet>
		<uv-datetime-picker ref="datetimePicker" v-model="timeValue" mode="datetime" @confirm="createTimeChange"></uv-datetime-picker>
	</view>
</template>

<script setup>
import {
	ref,
	unref,
	computed
} from 'vue'
import { onLoad,onShow ,onReady} from '@dcloudio/uni-app'
import {
  getDictData,
  createRecord
} from '@/api/customer'
import { formatDateTime } from '@/utils/util'
const title = ref('添加商机跟进')
const selectList = ref([])
const followList = ref([])
const followName = ref('')
const lists = ref([])
const content = ref('')
const recordTypeName = ref('')
const form = ref({
	name: '',
	nexxTime: '',
	recordType: '',
	followStatus: '',
	content: '',
	types: 'business',
})
const businessId = ref(0)
const businessName = ref('')
const errorType = ref('message')
const nextTime = ref('')
const rules = ref({
	followStatus: [
		{
			required: true,
			message: '请选择跟进状态',
			trigger: ['change','blur']
		},
	],
	recordType: [
		{
			required: true,
			message: '请选择跟进方式',
			trigger: ['change','blur']
		},
	],
	content: [
		{
			required: true,
			message: '请填写跟进内容',
			trigger: ['change','blur']
		},
	],
})

onLoad((e) => {
	businessId.value = e.businessId
	businessName.value = e.businessName
	
	getBaseConfig()
})

const followStatusShowRef = ref()
const followShow  = () => {
	followStatusShowRef.value.open()
}

const selectShowRef = ref()
const selectShow  = () => {
	selectShowRef.value.open()
}

const datetimePicker = ref()
const createTimeShow = () => {
	unref(datetimePicker).open()
}


// 获取配置字段
const getBaseConfig = async() => {
	followList.value = await getDictData({type:'follow_status'})
	selectList.value = await getDictData({type:'follow_type'})
}

// 选择跟进方式
const recordTypeClick = (index) => {
	recordTypeName.value = index.name
	form.value.recordType = index.value
}
// 选择跟进状态
const followClick = (index) => {
	followName.value = index.name
	form.value.followStatus = index.value
}
const createTimeChange = (e) => {
	form.value.nextTime = e.value
	nextTime.value = formatDateTime(e.value)
}
		

// 提交跟进
const uForm = ref()
const submit = (val) => {
	uForm.value.validate().then(res => {
		onSubmit()
	}).catch(errors => {
		uni.showToast({
			icon: 'error',
			title: '校验失败'
		})
	})
}
// 开始提交跟进
const onSubmit = async() => {
	form.value.typesId = businessId.value
	form.value.content = '【'+followName.value+'】' + form.value.content
	await createRecord(form.value)
	
	uni.navigateBack()
}

</script>

<style lang="scss" scoped>
.set-box {
    padding: 0rpx 22rpx;
    margin-bottom: 80rpx;
  .option {
    .text {
      color: #747474;
      font-size: 26rpx;
      text-align: justify;
      padding-bottom: 15rpx;
    }
    .input-box {
      width: 200rpx;
      margin-right: 15rpx;
    }
  }
}

</style>
